import {
    Component,
    ComponentFactory,
    ComponentFactoryResolver, //
    ComponentRef,
    OnDestroy,
    ViewChild,
    ViewContainerRef,
} from '@angular/core';
import {AlertComponent} from '../../../@shared/components/alert/alert.component';

// https://segmentfault.com/a/1190000009175508

@Component({
    selector: 'app-basic-list',
    templateUrl: './basic-list.component.html',
    styleUrls: ['./basic-list.component.scss'],
})
export class BasicListComponent implements OnDestroy {




    componentRef: ComponentRef<AlertComponent>;
    @ViewChild('alertContainer', {read: ViewContainerRef})
    container: ViewContainerRef;

    // 在我们定义 createComponent() 方法前，
    // 我们需要注入 ComponentFactoryResolver 服务对象。
    // 该 ComponentFactoryResolver 服务对象中，
    // 提供了一个很重要的方法 - resolveComponentFactory() ，
    // 该方法接收一个组件类作为参数，并返回 ComponentFactory 。
    constructor(private resolver: ComponentFactoryResolver) {
    }

    createComponent(type) {
        // 每次我们需要创建组件时，我们需要删除之前的视图，
        // 否则组件容器中会出现多个视图 (如果允许多个组件的话，就不需要执行清除操作 )。
        this.container.clear();

        // 正如我们之前所说的，
        // resolveComponentFactory() 方法接受一个组件并返回如何创建组件的 ComponentFactory 实例。
        const factory: ComponentFactory<AlertComponent> = this.resolver.resolveComponentFactory(AlertComponent);

        // 调用容器的 createComponent() 方法，
        // 该方法内部将调用 ComponentFactory 实例的 create() 方法创建对应的组件，
        // 并将组件添加到我们的容器。
        this.componentRef = this.container.createComponent(factory);

        // 现在我们已经能获取新组件的引用，即可以我们可以设置组件的输入类型：
        this.componentRef.instance.type = type;
        // 同样我们也可以订阅组件的输出属性，具体如下：
        this.componentRef.instance.output.subscribe((msg: string) => console.log(msg));
    }

    ngOnDestroy() {
        this.componentRef && this.componentRef.destroy();
    }
}
